<template>
  <div class="app-container">
    <el-form :model="trialInfo" :rules="trialInfoRules" ref="trialInfoRef" size="small"
             label-width="68px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="长度" prop="length">
            <el-input v-model="trialInfo.length" type="number"
                      placeholder="请输入货物长度（单位：cm）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度" prop="width">
            <el-input v-model="trialInfo.width" type="number"
                      placeholder="请输入货物宽度（单位：cm）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="高度" prop="height">
            <el-input v-model="trialInfo.height" type="number"
                      placeholder="请输入货物高度（单位：cm）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="重量" prop="weight">
            <el-input v-model="trialInfo.weight" type="number"
                      placeholder="请输入货物重量（单位：g）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型" prop="type">
            <el-select v-model="trialInfo.type" placeholder="请选择货物类型" size="small">
              <el-option v-for="(item,index) in dict.type.erp_product_template" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="getTrialList" size="small">区域运费试算</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-list flex-wrap mt20" v-loading="loading" element-loading-text="拼命加载中">
      <div v-for="(leftTitle,index) in freightTrialList"
           :key="leftTitle.value" :class="{'borderLeft':absoluteQuoteMap(leftTitle,index)}">
        <div class="header box">{{ leftTitle.value }}</div>
        <div class="content box">{{ leftTitle.lable }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCollectProduct, updateCollectProduct, getArea} from "@/api/gather/collectProduct";
import {queryAreaFreightTrial} from "@/api/freight";
import Cookies from "js-cookie";

export default {
  dicts: ['erp_product_template'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 按钮loading
      buttonLoading: false,
      // 全部区域列表
      freightTrialList: [],
      trialLoading: false,
      trialInfo: {},
      trialInfoRules: {
        country: [{required: true, message: '国家不能为空', trigger: 'change'}],
        length: [{required: true, message: '长度不能为空', trigger: 'blur'}],
        width: [{required: true, message: '宽度不能为空', trigger: 'blur'},],
        height: [{required: true, message: '高度不能为空', trigger: 'blur'},],
        weight: [{required: true, message: '重量不能为空', trigger: 'blur'},],
        type: [{required: true, message: '类型不能为空', trigger: 'change'},],
      },
      screenWidth: null,
    }
  },
  // watch: {
  //   screenWidth: {
  //     handler: function (newValue, oldValue) {
  //       console.log('n,o', newValue, oldValue)
  //       // let isOpenNavbar = Cookies.get('sidebarStatus');
  //       // let rowNum = 0;
  //       // console.log('isOpenNavbar', isOpenNavbar, typeof isOpenNavbar)
  //       // if (isOpenNavbar === '1') {
  //       //   rowNum = parseInt((newValue - 240) / 150)
  //       // } else {
  //       //   rowNum = parseInt((newValue - 40) / 150)
  //       // }
  //       //
  //       // console.log('num', rowNum)
  //
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  // mounted() {
  //   this.screenWidth = document.body.clientWidth
  //   window.addEventListener('resize', () => {
  //     this.screenWidth = document.body.clientWidth
  //   })
  // },
  computed: {
    // 区域定价数据
    absoluteQuoteMap() {
      return item => {
        // let windowWidth = window.innerWidth;
        // console.log("浏览器窗口宽度：" + windowWidth);
        // console.log('item', item)
      }
    }
  },
  created() {
    // this.getTrialList();
  },
  methods: {
    getTrialList() {
      this.loading = true
      queryAreaFreightTrial(this.trialInfo).then(response => {
        this.freightTrialList = response.data
      }).finally(() => {
        this.loading = false
      })
    }
    ,
    // 获取区域定价国家选择列表
    getAreaList() {
      this.loading = true;
      getArea().then(res => {
        this.freightTrialList = res.data
        this.loading = false;
      });
    }
    ,
  },
}
</script>

<style lang="scss">
.table-list {
  width: 100%;
  //justify-content: center;
  //align-items: center;

  .box {
    width: 150px;
    text-align: center;
    padding: 10px 20px;
    //border-bottom: 1px solid #eee;
    border: 1px solid #eee;
  }

  .header {
    background-color: #eee;
  }

  .content {

  }

  .borderLeft {
    border-left: 1px solid #eee;
  }
}

</style>
